import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { Card, Col, Row, Avatar } from 'antd';
import { getNavList } from '@/store/modules/navStore';
import styles from './styles.module.css';

//import storage from '@/utils/storage';

const { Meta } = Card;
const nav = () => {
  const { list } = useSelector((state) => state.nav);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getNavList());
    return () => {
      // 清除副作用（组件卸载）
    };
  }, [dispatch]);
  //  storage.set('list', list, 1);

  return (
    <>
      <div className={styles.bg}>
        <div className={styles.bgcloud}></div>
        <div className={styles.bgcloud}></div>
        <div className={styles.bgcloud}></div>
      </div>
      {list.map((item, index) => {
        return (
          <Card
            className={styles.navbox}
            title={item.type}
            key={index}
            bordered={false}
          >
            <Row gutter={[10, 10]}>
              {item.list.map((item, index) => (
                <Col span={4} key={index}>
                  <Link to={item.nav_url}>
                    <Card hoverable>
                      <Meta
                        className={styles.navitem}
                        avatar={<Avatar src={item.nav_icon} />}
                        title={item.nav_title}
                        description={item.nav_desc}
                      />
                    </Card>
                  </Link>
                </Col>
              ))}
            </Row>
          </Card>
        );
      })}
    </>
  );
};
export default nav;
